<template>
  <div class="print-show">
    <!-- <el-button type="warning" @click="handlePrint">printJs打印</el-button> -->
    <div ref="print" id="barcode" style="width: 400px; height: 400px; display: flex; justify-content: center; align-items: center; flex-wrap: wrap">
      <div v-for="(item, index) in props.barcodeList" :key="index" class="LocationTemplate" style="width: 100%; height: 100%; display: flex; justify-content: center; align-items: center">
        <div class="box" style="width: calc(95% / 6.5 * 3.5); height: 90%; border: 2px solid#000; border-radius: 5px; padding: 10px 15px; box-sizing: border-box">
          <div style="font-weight: bold; margin-bottom: 5px; text-align: center; margin-bottom: 10px">库位标识卡</div>
          <div style="font-weight: bold; margin-bottom: 5px; text-align: center; margin-bottom: 10px">色彩女王</div>
          <div style="font-weight: bold; margin-bottom: 5px">
            <span class="title">库位代号: </span><span class="value">{{ item.warehousecode }}</span>
          </div>
          <div style="font-weight: bold; margin-bottom: 5px">
            <span class="title">库位名称: </span><span class="value">{{ item.repositoryname }}</span>
          </div>
          <div style="font-weight: bold; margin-bottom: 5px">
            <span class="title">所属仓库: </span><span class="value">{{ item.fnumber }}</span>
          </div>
          <div style="font-weight: bold; margin-bottom: 5px">
            <span class="title">仓库名称: </span><span class="value">{{ item.fname }}</span>
          </div>
          <div style="font-weight: bold"><span class="title"> 描述: </span><span class="value"></span></div>
          <div style="font-weight: bold; width: 90%; height: 45%; margin: 0 auto">
            <div class="imgBox" style="width: 100%; display: flex; justify-content: center; align-items: center">
              <img style="width: 100%" :src="item.Twocode" />
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- <el-button type="warning" @click="handleClick"></el-button> -->
  </div>
</template>

 
<script lang="ts" setup>
import { ref, watchEffect } from 'vue'
// import { getLodop } from '/admin/utils/LodopFuncs'
import printJS from 'print-js'
const props = defineProps({
  printingArr: Array,
  barcodeList: Array,
  PrintNow: Boolean,
})

// console.log('打印页面', props.printingArr)
console.log('接受打印数据', props.barcodeList)
const print = ref()

let emit = defineEmits(['send-data'])

watchEffect(() => {
  if (props.PrintNow == true) {
    console.log('触发更新：',props.PrintNow);
    triggerEvent()
    emit('send-data')
  }
})

let triggerEvent = () => {
  printJS({
    printable: 'barcode', // 要打印的元素的ID或HTML字符串
    type: 'html', // 打印内容的类型，可以是'html'、'image'、'pdf'等
    targetStyle: ['*'],
    scanStyles: false,
  })
}

// const handleClick = () => {
//   const LODOP = getLodop()
//   LODOP.PRINT_INIT('')
//   LODOP.SET_PREVIEW_WINDOW(0, 0, 0, 500, 500, '') // 演示设置各种样式的打印预览窗口：
//   const htmlCode = print.value.innerHTML
//   const styleCode =
//     '<style>*{margin: 0; padding: 0;}ul { list-style: none;}.LocationTemplate { width:100%; height: 100%; display: flex;align-items: center;justify-content: center;}.box { padding: 10px 20px;box-sizing: border-box;width: calc(90% / 6 * 4); height: 90%;border: 2px solid #000;}.box ul {width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: space-evenly;}.box ul li:last-child { width: 100%;height: 45%;display: flex; align-items: center; justify-content: center;}.box ul li {font-weight: 600;}.li-center { margin-bottom:10px;font-size: larger;text-align: center;}.imgBox { display: flex;justify-content: center; align-items: center;width:60% ;height: 80%;}img { display: inline-block; width: 90%;}</style>'
//   // print为要打印的html ID名称：
//   LODOP.ADD_PRINT_HTM(0, 0, '100%', '100%', styleCode + htmlCode)
//   LODOP.PREVIEW() // 打印预览
// }


</script>

<style lang="css" scoped>
.print-show {
  border: 1px solid #ccc;
  box-shadow: 2px 3px 10px #ccc;
  border-radius: 10px;
  width: 100%;
  height: 60vh;
  overflow: auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}

::-webkit-scrollbar-thumb {
  background: #ccc;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: #ccc;
}

::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 5px;
}
</style>

<!-- <style lang="scss" scoped>
 @media print {
  * {
    margin: 0 !important;
    padding: 0 !important;
  }
  .LocationTemplate {
    border: 2px solid red;
    width: 400px !important;
    height: 400px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  .LocationTemplate .box {
    padding: 10px 20px !important;
    box-sizing: border-box !important;
    width: calc(90% / 6 * 4) !important;
    height: 90% !important;
    border: 2px solid #000 !important;
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-evenly !important;
  }
  .box .item {
    width: 100%;
    height: 100%;
    font-weight: 600 !important;
  }
  .item-center {
    font-size: larger !important;
    text-align: center !important;
  }

  .imgBox {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 50px !important;
    height: 50px !important;
  }
} 
</style> -->
 
 <!-- <style>

* {
  margin: 0 !important;
  padding: 0 !important;
}
ul {
  list-style: none !important;
}
.LocationTemplate {
  border: 1px solid green !important;
  width: 500px !important;
  height: 500px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.box {
  padding: 10px 20px !important;
  box-sizing: border-box;
  width: calc(90% / 6 * 4);
  height: 90%;
  border: 2px solid #000;
}
.box ul {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
}

.box ul li:last-child {
  width: 100%;
  height: 45%;
  /* border: 1px solid #000; */
  /* background-color: antiquewhite; */
  display: flex;
  align-items: center;
  justify-content: center;
}

.box ul li {
  font-weight: 600;
  /* border: 1px solid green; */
}
.li-center {
  font-size: larger;
  text-align: center;
}

.imgBox {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 60%;
  height: 80%;
  border: 1px solid #000;
}

img {
  display: inline-block;
  width: 90%;
}
</style> -->
